<template>
  <div class="m_tab" v-if="page_fresh">
    <div class="address_tab">
      <h2>{{ addresstab.name }}</h2>
      <div class="buttons-container">
        <button @click="show_details">{{ details_close }}</button>
        <button @click="change_address">修改</button>
        <button @click="remove_address">删除</button>
        <button @click="add_device">添加设备</button>
      </div>
      <div v-show="address_change_show" class="change-address-container">
        <input type="text" ref="ad_name" placeholder="请输入修改后地区的名称"/>
        <button @click="change_ad">确定</button>
        <button @click="change_ad_quit">取消</button>
      </div>
      <div v-show="address_remove_show" class="remove-address-container">
        是否要删除？(删除后会将该地区下所有设备一并删除)
        <button @click="remove_ad">确定</button>
        <button @click="remove_ad_quit">取消</button>
      </div>
      <div v-show="device_add_show" class="add-device-container">
        <p>请注意，一台物理设备只能在本系统中添加一次！！！</p>
        <div class="add-device-inputText">
          <input type="text" ref="de_name" placeholder="请输入添加设备的名称"/>
          <input type="text" ref="api" placeholder="请输入添加设备的API地址(url/deviceDataHandler)"/>
          <input type="text" ref="de_bs_id" placeholder="请输入添加设备的商户号(business)"/>
          <input type="text" ref="de_eq" placeholder="请输入添加设备唯一编号(equipment)"/>
          <input type="text" ref="de_v" placeholder="请输入添加设备的API版本号(version)"/>
          <input type="text" ref="de_id" placeholder="请输入添加设备的序列号(deviceid)"/>
          <input type="text" ref="de_db" placeholder="请输入添加设备对应数据库表名称(databaseName)"/>
          <button @click="add_de">确定</button>
          <button @click="add_de_quit">取消</button>
        </div>
      </div>
    </div>
    <div v-show="show_index" class="device-list">
      <div class="device-box" v-for="(item, index) in addresstab.device_details" :key="index">
        <DeviceTab :device="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/api/request';
import DeviceTab from './management_device_tab.vue';
import {time} from 'echarts';

export default {
  props: {
    address: {
      required: true
    }
  },
  components: {
    DeviceTab
  },
  data() {
    return {
      addresstab: {
        id: this.address.id,
        name: this.address.name,
        device_details: null
      },
      show_index: false,
      details_close: '详情',
      address_change_show: false,
      address_remove_show: false,
      device_add_show: false,
      page_fresh: true
    }
  },
  methods: {
    show_details() {
      this.show_index = !this.show_index;
      if (this.show_index) {
        this.details_close = '关闭';
        this.get_device_details();
        this.address_change_show = false;
        this.address_remove_show = false;
        this.device_add_show = false;
      } else {
        this.details_close = '详情';
      }
    },
    get_device_details() {
      request.get('http://localhost:5000/device/select?address_id=' + this.addresstab.id).then(function (response) {
        console.log(response.data);
        this.addresstab.device_details = response.data;
      }.bind(this));
    },
    remove_address() {
      this.address_remove_show = !this.address_remove_show;
      if (this.address_remove_show) {
        this.address_change_show = false;
        this.show_index = false;
        this.device_add_show = false;
        this.details_close = '详情';
      }
    },
    remove_ad() {
      request.get('http://localhost:5000/address/remove?address_id=' + this.addresstab.id).then(function (response) {
        if (response.data === 'True') {
          alert("删除成功");
        }
      }.bind(this));
      this.address_remove_show = false;
      this.page_fresh = false
    },
    remove_ad_quit() {
      this.address_remove_show = false;
    },
    change_address() {
      this.address_change_show = !this.address_change_show;
      if (this.address_change_show) {
        this.address_remove_show = false;
        this.show_index = false;
        this.device_add_show = false;
        this.details_close = '详情';
      }
    },
    change_ad() {
      let new_name = this.$refs.ad_name.value;
      request.get('http://localhost:5000/address/change?address_id=' + this.addresstab.id + '&address_name=' + new_name).then(function (response) {
        if (response.data === 'True') {
          this.addresstab.name = new_name;
          alert("修改成功");
        }
      }.bind(this));
      this.address_change_show = false;
    },
    change_ad_quit() {
      this.address_change_show = false;
    },
    add_device() {
      this.device_add_show = !this.device_add_show;
      if (this.device_add_show) {
        this.address_change_show = false;
        this.show_index = false;
        this.address_remove_show = false;
        this.details_close = '详情';
      }
    },
    add_de_ex() {
      let address_id = this.addresstab.id;
      let address_name = this.$refs.de_name.value;
      let address_business_id = this.$refs.de_bs_id.value;
      let address_device_id = this.$refs.de_id.value;
      let address_eq = this.$refs.de_eq.value;
      let address_v = this.$refs.de_v.value;
      let address_api = this.$refs.api.value;
      let address_db = this.$refs.de_db.value;
      request.get('http://localhost:5000/device/add?address_id=' + address_id + '&device_name=' + address_name + '&business_id=' + address_business_id + '&device_id=' + address_device_id + '&equipment=' + address_eq + '&database=' + address_db + '&version=' + address_v + '&api=' + address_api).then(function (response) {
        console.log(response);
        if (response.data) {
          // alert("添加成功");
          this.get_device_details()
        }
      }.bind(this));
      this.device_add_show = false;
    },

    add_de() {
      this.add_de_ex()

      this.page_fresh = false
      // this.get_device_details()
      // console.log()
      setTimeout(() => {
        this.$nextTick(() => {
          this.page_fresh = true
        })
      }, 1000)

    },
    add_de_quit() {
      this.device_add_show = false;
    }
  }
};
</script>

<style scoped>
.m_tab {
  padding: 20px;
  min-width: 40%;
  border-radius: 5px;
  border: #00bd7e 1px solid;
}

.m_tab:hover {
  transform: translateY(-0.5rem);
}

.address_tab {
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.buttons-container {
  margin-bottom: 10px;
}

.buttons-container button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.buttons-container button:last-child {
  margin-right: 0;
}

.change-address-container,
.remove-address-container,
.add-device-container {
  margin-bottom: 10px;
}

.add-device-inputText {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
}

.change-address-container input,
.remove-address-container input,
.add-device-container input {
  margin-bottom: 10px;
  padding: 5px;
}

.change-address-container button,
.remove-address-container button,
.add-device-container button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.device-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.device-box {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  width: calc(100% - 10px);
  background-color: #f0f0f0;
}

.device-box:last-child {
  margin-right: 0;
}

.device-box:hover {
  background-color: #e0e0e0;
}
</style>
